<template>
  <el-container>
    <el-header>
    <template>
      <el-button type="warning" @click="open" class="createSign">创建签到</el-button>
    </template>
      <el-menu
        ref="PulishMenu"
        :default-active="this.$route.path"
        router
        class="el-menu-demo"
        mode="horizontal"
        active-text-color="#ff4500"
      >
        <el-menu-item index="/page/createClock/publish">签到</el-menu-item>
         <el-menu-item index="/page/createClock/createMessage">通知信息</el-menu-item>
        <!--<el-menu-item index="/page/message/otherMessage">其他消息</el-menu-item> -->
      </el-menu>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'Message',
  props: {},
  components: {},
  data () {
    return {}
  },
  // watch: {
  //   // 监听路由变化
  //   $route () {
  //     const i = this.$route.path
  //     setTimeout(() => {
  //       this.$refs.menu.activeIndex = i
  //     }, 100)
  //   }
  // }
  methods: {
    open () {
      this.$router.push('/page/createClock/createPublish')
    }
  }
}
</script>

<style lang='less' scoped>
.el-menu{
  margin-top: 20px;
  background-color: #fafafa;
}
.el-menu:hover{
     box-shadow: inset -6px -6px 10px rgba(255, 255, 255, 0.5),
               inset 6px 6px 20px rgba(0, 0, 0, 0.05);
    transform: scale(0.98);
    cursor: pointer;
}
.el-menu-demo{
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.el-container{
  position: relative;
}
.createSign{
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 10;
}
</style>
